import React from "react";
import { Link, withRouter } from "react-router-dom";
import { Breadcrumb } from "antd";
import { createFromIconfontCN } from '@ant-design/icons';
const breadcrumbNameMap = {//跟路由路径保持一致
    '/product':'商品',
    '/product/category':"品类管理",
    '/product/manger':'商品管理',

    '/user':'用户管理',

    '/role':'角色管理',

    '/article':'文章管理',
    '/article/search':'查看文章',
    '/article/post':'添加文章',
    '/article/classadd':'添加分类',
    '/article/classshow':'查看分类',
    '/article/edit':'修改文章',

    '/order':'订单管理',
    
};

const Nav = withRouter((props) => {
    const { location } = props;
    const pathSnippets = location.pathname.split("/").filter((i) => i);
    const extraBreadcrumbItems = pathSnippets.map((_, index) => {
        const url = `/${pathSnippets.slice(0, index + 1).join("/")}`;
        return (
            <Breadcrumb.Item key={url}>
                <Link to={url}>{breadcrumbNameMap[url]}</Link>
            </Breadcrumb.Item>
        );
    });
    const IconFont = createFromIconfontCN({
        scriptUrl: '//at.alicdn.com/t/font_2357604_hihyhxcyd6p.js',
      });
    const breadcrumbItems = [
        
        <Breadcrumb.Item key="home"><Link to="/"><IconFont type="icon-shouye" />首页</Link></Breadcrumb.Item>
    ].concat(extraBreadcrumbItems);
    return (
        <div className="demo">
            <Breadcrumb style={{ margin: "16px" }}>
                {breadcrumbItems}
            </Breadcrumb>
        </div>
    );
});
export default Nav;

